<template>
  <div id="app">
  <!--   路由的出口-->
      <router-view/>

      <div class="tabbar">
          <van-tabbar v-model="active" route>
              <van-tabbar-item to="/home">
                  <span>首页</span>
                  <template #icon="props">
                      <img :src="props.active ? icon.home.active : icon.home.inactive" />
                  </template>
              </van-tabbar-item>
              <van-tabbar-item to="/company">
                  <span>公司</span>
                  <template #icon="props">
                      <img :src="props.active ? icon.company.active : icon.company.inactive" />
                  </template>
              </van-tabbar-item>
              <van-tabbar-item to="/message">
                  <span>消息</span>
                  <template #icon="props">
                      <img :src="props.active ? icon.message.active : icon.message.inactive" />
                  </template>
              </van-tabbar-item>
              <van-tabbar-item to="/mine">
                  <span>我的</span>
                  <template #icon="props">
                      <img :src="props.active ? icon.mine.active : icon.mine.inactive" />
                  </template>
              </van-tabbar-item>
          </van-tabbar>
      </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref(0);
const icon = {
    'home':{
        'inactive':'/icon/gangwei.png',
        'active': '/icon/gangwei_active.png'
    },
    'company':{
        'inactive':'/icon/gongsi.png',
        'active': '/icon/gongsi_active.png'
    },
    'message':{
        'inactive':'/icon/xiaoxi.png',
        'active': '/icon/xiaoxi_active.png'
    },
    'mine':{
        'inactive':'/icon/wode.png',
        'active': '/icon/wode_active.png'
    },

}

</script>


<style lang="less">
#app {
    max-width: 750px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    min-width: 320px;
    position: relative;
    .tabbar{
      position: absolute;
      bottom: 0;
      left:0;
      width: 100%;
      max-width: 750px;
      .van-tabbar--fixed{
        position: absolute;
        bottom:0;
        left: 0;
      }
    }
}
</style>